import Base from "../base.js";
import adminsApi from '../../api/admins.js';
export default class extends Base {
    data = {
        curPage: 1,
        eachPage: 10,//每页显示条数
        total: 0,
        maxPage: 0,//总页数
        rows: [],//当先页数据
    };
    render() {
        // 渲染电影表格
        this.$el.html(`
        <h1 style="text-align:center">后台管理员</h1>
        <div>
        <table  class="layui-table" lay-size="sm" id="tableList">
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="admins-list"></body>
        </table>
            <div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                    <label class="layui-form-label">页数</label>
                    <div class="layui-input-inline">
                        <select name="quiz" class="curPage">
                        </select>
                    </div>
                </div>
                    共<span class="tatol"></span>条
                    当前：<input  type="text" name="eachPage" value="${this.data.eachPage}">
                    <button class="first-btn layui-btn layui-btn">首页</button>
                    <button class="prve-btn layui-btn layui-btn">上一页</button>
                    <button class="next-btn layui-btn layui-btn">下一页</button>
                    <button class="last-btn layui-btn layui-btn">末页</button>
                
            </div>
        </div>
        `);

        this.$adminslist = $(".admins-list");  // 表格渲染挂载区域
        this.$curpageEle = $(".curPage");//总页数
        this.$tatolEle = $(".tatol");//数据总数
        this.$eachPage = $("input[name=eachPage]");//当前页
        this.$fristBtn = $(".first-btn");//首页
        this.$prveBtn = $(".prve-btn");//上一页
        this.$nextBtn = $(".next-btn");//下一页
        this.$lastBtn = $(".last-btn");//尾页
        this.$tableList = $("#tableList")
    };

    //渲染电影列表
    rerender() {
        const str = this.data.rows.map((item, index) => {
            return `<tr>
                <td>${item._id}</td>
                <td>${item.adminsname}</td>
                <td>${item.adminspassword}</td>
                <td>
                <button class="layui-btn layui-btn-danger layui-btn-xs" id="${item._id}" name="delBtn" value="${index}"><i class="layui-icon"></i>删除</button>
                </td>
              </tr>`
        }).join("");


       
        this.$adminslist.html(str);
        this.$tatolEle.html(this.data.total)
        let options = "";
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `<option value="${i}">${i}</option>`

        }
        //    更新按钮
        this.$curpageEle.html(options).val(this.data.curPage);
    };
    async getadmins() {

        const { curPage, eachPage } = this.data;
        const data = await adminsApi.get({ curPage, eachPage });
        Object.assign(this.data, data)
        this.rerender()
    };
    // 获取数据
    mounted() {
        this.getadmins();
    };
    //首页
    first() {
        if (this.data.curPage === 1) return;
        this.data.curPage = 1;
        this.getadmins();

    };
    // 末页
    last() {
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getadmins();
    };
    // 上一页
    prveHandle() {
        if (this.data.curPage === 1) return;
        this.data.curPage--;
        this.getadmins();
    };
    // 下一页
    nextHandle() {

        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage++;
        this.getadmins();

    };
    //    当前页
    setEachePageHandle(e) {
        this.data.eachPage = ~~e.target.value;
        this.getadmins();
    };
    // 删除更新
    async removeHandle(e) {
        if ($(e.target).attr("name") == "delBtn") {
            if (confirm("确定要删除吗!")) {
                const _id = $(e.target).attr("id");
                await adminsApi.remove({ _id });
                this.getadmins()
            } else {

            }

        } 
    }
    

    // 搜索
    handle() {
        // 首页绑定点击事件
        this.$fristBtn.on("click", this.first.bind(this));
        // 末页绑定点击事件
        this.$lastBtn.on("click", this.last.bind(this));
        // 上一页绑定点击事件
        this.$prveBtn.on("click", this.prveHandle.bind(this));
        // 下一页绑定点击事件
        this.$nextBtn.on("click", this.nextHandle.bind(this));
        // 绑定失去焦点事件
        this.$eachPage.on("blur", this.setEachePageHandle.bind(this));
        // this.$updateBtnEle.on("click",this.nextHandle.bind(this));
        // 删除数据
        this.$tableList.on("click", this.removeHandle.bind(this))

    };
}